<template>
	<view style="background-color: #FFFFFF; padding: 20rpx 30rpx;">
		<u-form-item label-position="top" label="发布类型" label-width="150">
			<u-input :border="border" type="select" :select-open="typeShow" v-model="model.type" placeholder="请选择发布类型"
				@click="typeShow = true"></u-input>
		</u-form-item>
		<u-form-item label-position="top" class="pus_title" label="介绍下吧">
			<u-input type="textarea" :border="border" placeholder="请填写对自己的描述" v-model="model.intro" />
		</u-form-item>
		<u-form-item label-position="top" label="上传图片" prop="photo" label-width="150">
			<u-upload width="160" height="160" ref="uUpload" :action="up_action"></u-upload>
		</u-form-item>
		<u-form-item label-position="top" class="pus_title" label="金币">
			<u-input type="text" :border="border" placeholder="请填写需要的金币数量" v-model="model.coin" />
		</u-form-item>
		<u-form-item label-position="top" class="pus_title" label="单位">
			<u-radio-group v-model="radio" :width="radioCheckWidth" :wrap="radioCheckWrap">
				<u-radio shape="circle" v-for="(item, index) in radioList" :key="index" :name="item.name">
					{{ item.name }}
				</u-radio>
			</u-radio-group>
		</u-form-item>
		<u-form-item label-position="top" class="pus_title" label="游戏">
			<u-radio-group v-model="radioGame" :width="radioCheckWidth" :wrap="radioCheckWrap">
				<u-radio shape="circle" v-for="(item, index) in radioGameList" :key="index" :name="item.name">
					{{ item.name }}
				</u-radio>
			</u-radio-group>
		</u-form-item>
		<u-form-item label-position="top" class="pus_title" label="特点" label-width="150" prop="likeFruit">
			<u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
				<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">
					{{ item.name }}
				</u-checkbox>
			</u-checkbox-group>
		</u-form-item>
		<u-tabbar @change="switchTab" :show="true" :list="tb_list"></u-tabbar>
		<u-picker :range="typeRange" mode="selector" v-model="typeShow" @confirm="typeConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		onLoad() {
			setTimeout(() => {
				var login_info = this.checkLogin('index', '');
				this.up_action = this.HR + 'upload_file';
				console.debug('查询是否登录' + login_info);
				if (login_info) {
					this.token = login_info[0];
					console.debug('token:' + this.token);
				} else {
					uni.showToast({
						title: '未登录',
						icon: 'none'
					});
				}
			}, 1000);
		},
		data() {
			return {
				token: '',
				up_action: '',
				typeRange: ['服务', '需求'],
				typeShow: false,
				tb_list: [{ // 显示的项目数
					iconPath: "zhuanfa", // 默认图标
					selectedIconPath: "zhuanfa", // 选中图标
					text: '发布', // 图标底部文本
					customIcon: false, // 非自定义
				}],
				checkboxList: [{
						name: '能开麦',
						checked: true,
						disabled: false
					},
					{
						name: '带飞',
						checked: false,
						disabled: false
					},
					{
						name: '声音好听',
						checked: false,
						disabled: false
					},
					{
						name: '急速接单',
						checked: false,
						disabled: false
					}
				],
				border: false,
				radio: '一局',
				radioGame: '第五人格',
				radioList: [{
						name: '一局',
						checked: true,
						disabled: false
					},
					{
						name: '半小时',
						checked: false,
						disabled: false
					},
					{
						name: '一天',
						checked: false,
						disabled: false
					}
				],
				radioGameList: [{
						name: '第五人格',
						checked: true,
						disabled: false
					},
					{
						name: '王者荣耀',
						checked: false,
						disabled: false
					},
					{
						name: '和平精英',
						checked: false,
						disabled: false
					}
				],
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				model: {
					type: '服务',
					name: '',
					sex: '',
					likeFruit: '',
					intro: '',
					payType: '支付宝',
					agreement: false,
					region: '',
					goodsType: '',
					phone: '',
					code: '',
					coin: '',
					password: '',
					rePassword: '',
					remember: false,
					photo: ''
				},
				describe: "", // 描述输入框
				tb: '',
			};
		},

		methods: {
			typeConfirm(e) {
				this.model.type = this.typeRange[e[0]];
			},
			checkboxGroupChange() {

			},
			switchTab() {
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				});
				// 如果您不需要进行太多的处理，直接如下即可
				// files = this.$refs.uUpload.lists;
				console.log(files);

				var file;
				if (files.length > 0) {
					file = files[0].response;
				} else {
					file = '';
				}

				console.debug('文件URL' + file);
				console.debug('类型 ' + this.model.type);
				console.debug('描述 ' + this.model.intro);
				console.debug('金币 ' + this.model.coin);
				console.debug('单位 ' + this.radio);
				console.debug('游戏 ' + this.radioGame);

				this.td = '';
				for (var i = 0; i < this.checkboxList.length; i++) {
					if (this.checkboxList[i].checked) {
						this.td = this.td + '#' + this.checkboxList[i].name;
					}
				}

				console.debug('特点 ' + this.td);

				console.debug('sss')
				uni.request({
					url: this.httpRoot + 'okami/publish',
					method: 'POST',
					header: {
						"token": this.token
					},
					data: {
						photo: file, // 图片
						type: this.model.type, // 类别
						describe: this.model.intro, // 描述
						price: this.model.coin, // 价格
						unit: this.radio, // 单位
						game: this.radioGame, // 游戏名
						characteristic: this.td // 特点
					},
					success: res => {
						console.debug(res);
						console.debug(res.data);
						var code = 0;
						var data = {};
						var message = '';
						if ('code' in res.data) {
							code = res.data.code;
						}
						if ('message' in res.data) {
							message = res.data.message;
						}
						if (message != '') {
							uni.showToast({
								title: message,
								icon: 'none'
							});
						}
						if (code == 200) {
							// 发布成功
							uni.showToast({
								title: '发布成功'
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 2000);
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络连接失败',
							icon: 'none'
						})
					},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	.pus_title {
		width: 100%;
		text-align: left;
		padding: 20rpx;
	}
</style>
